<template>
  <view class="appointment bg-nav-bar-3">
    <NavBar showBack title="预约详情"></NavBar>
    <ProgressBar :activeSetp="activeSetp" :setpList="setpList"></ProgressBar>
    <view class="appointment-content">
      <ImgIcon :class="`step-car stepcar-${activeSetp}`" size="128*52" src="static/icons/icon-car.png"></ImgIcon>
      <StepSubmit :orderinfo="orderInfo">
      </StepSubmit>
    </view>
  </view>
  <view class="bottom-btn">
    <view class="btn" @click="onDaohang">一键导航</view>
  </view>
</template>


<script setup>
import { ref, onMounted } from "vue"
import ImgIcon from "@/components/ui/img-icon"
import NavBar from "@/components/ui/nav-bar"
import StepSubmit from "./com/step-submit"
import ProgressBar from "../appointment/com/progress-bar"
import service from "@/path/service"
import { router } from "@/path/router";
import { getUserLocation } from "@/path/location";
const orderInfo = ref({})
const activeSetp = ref(3)
const setpList = [
  { setp: 1, title: "预约类型" },
  { setp: 2, title: "用户信息" },
  { setp: 3, title: "提交信息" },
  // { setp: 4, title: "导航" },
]
onMounted(() => {
  const routerData = router.getData()
  if (routerData?.id) {
    getUserLocation().then((res) => {
      return service.get("api/ycg/usercenter/appointdetail", {
        id: routerData?.id,
        lat: res.latitude,
        lng: res.longitude,
      })
    }).then((res) => {
      orderInfo.value = res
    })
  }
})
function onDaohang() {
  uni.openLocation({
    latitude: orderInfo.value.shop.lat,
    longitude: orderInfo.value.shop.lng,
    name: orderInfo.value.shop.name,
    address: orderInfo.value.shop.address,
  })
}
</script>

<style lang="less" scoped>
@import url(./index.less);
</style>

